<template>
  <div>
    <div v-loading="loading" class="order_detail">
      <div class="detail_a flex">
        <p>订单详情</p>
        <p @click="back_order()">返回订单列表</p>
      </div>
      <div class="detail_b">
        <p class="b_a">订单号：{{info.orderNo}}</p>
        <div class="b_b">
          <div class="flex">
            <p>
              订单状态：
              <span class="b_b_p1">{{info.orderStatus}}</span>
            </p>
            <p v-if="info.createtime">付款时间：{{info.createtime}}</p>
          </div>
          <div class="flex">
            <p>
              交易金额：
              <span class="b_b_p2">￥{{info.payMoney}}</span>
            </p>
            <p class="saw_wuliu" @click="Swuliu(info.id)" v-if="info.orderStatus=='待收货'">查看物流</p>
          </div>
        </div>
      </div>
      <div class="detail_c">
        <p>配送信息</p>
        <div class="flex">
          <p>收货地址</p>
          <p>{{info.username}}，{{info.userphone}}，{{info.useraddr}}</p>
        </div>
      </div>
      <div class="detail_d">
        <p>商品信息</p>
        <div class="d_a flex">
          <p style="width:390px;">商品</p>
          <p style="width:171px;">单价</p>
          <p style="width:177px;">数量</p>
          <p style="width:212px;">小计</p>
        </div>
        <div class="flex d_b">
          <div class="d_b_per">
            <div class="d_b_goods flex" v-for="(list,index) in info.ykGoods" :key="index">
              <div class="goods_img flex">
                <img :src="list.photo" alt />
                <p>{{list.title}}</p>
              </div>
              <div class="goods_price">￥{{list.price}}</div>
              <div class="goods_num" v-if="list.type=='3'">x{{list.num}}</div>
              <div class="goods_num" v-else>x1</div>
            </div>
          </div>
          <div class="d_b_paymoney">￥{{info.payMoney}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { orderinfo } from "../../api/index";
export default {
  props: {},
  data() {
    return {
      orderid: "",
      loading: true,
      info: {}
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.orderid =
      this.$route.params.orderid || sessionStorage.getItem("orderid");
    sessionStorage.setItem("orderid", this.orderid);
    this.post();
  },
  watch: {},
  methods: {
    post() {
      let msg = {
        id: this.orderid
      };
      orderinfo(this.qs(msg))
        .then(res => {
          this.loading = false;
          if (res.data.code == 0) {
            if (res.data.ykOrder.orderStatus == "0") {
              res.data.ykOrder.orderStatus = "待付款";
            } else if (res.data.ykOrder.orderStatus == "1") {
              res.data.ykOrder.orderStatus = "待发货";
            } else if (res.data.ykOrder.orderStatus == "2") {
              res.data.ykOrder.orderStatus = "待收货";
            } else if (res.data.ykOrder.orderStatus == "3") {
              res.data.ykOrder.orderStatus = "已完成";
            }
            this.info = res.data.ykOrder;
          } else {
            this.$message({
              type: "info",
              message: res.data.msg
            });
          }
        })
        .catch(e => {});
    },
    back_order() {
      this.$router.push({
        name: "order"
      });
    },
    Swuliu(id){
        this.$router.push({
            name:'orderWuliu',
            params:{
                orderid:id
            }
        })
        document.body.scrollTop = 0;
      document.documentElement.scrollTop = 0;
    }
  },
  components: {}
};
</script>

<style scoped>
.order_detail {
  width: 1027px;
  background: rgba(255, 255, 255, 1);
}
.detail_a {
  justify-content: space-between;
  margin-left: 39px;
  margin-right: 37px;
  padding-top: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
}
.detail_a > p:nth-child(1) {
  font-size: 16px;
  font-weight: bold;
  color: rgba(51, 51, 51, 1);
}
.detail_a > p:nth-child(2),.saw_wuliu {
  width: 105px;
  height: 30px;
  background: rgba(216, 20, 23, 1);
  border-radius: 4px;
  font-size: 14px;
  color: rgba(255, 255, 255, 1) !important;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.detail_b {
  padding-top: 10px;
}
.b_a {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  margin-left: 42px;
}
.b_b {
  width: 952px;
  background: rgba(253, 254, 229, 1);
  margin-left: 38px;
  margin-top: 19px;
  padding-bottom: 15px;
}
.b_b > div {
  justify-content: space-between;
  margin: 0px 29px 0px 21px;
  padding-top: 9px;
}
.b_b > div > p {
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
}
.b_b_p1 {
  color: #0b9f0f !important;
}
.b_b_p2 {
  color: #d81417 !important;
}
.detail_c > p,
.detail_d > p {
  font-size: 16px;
  color: rgba(51, 51, 51, 1);
  margin: 23px 39px;
}
.detail_c > div > p {
  font-size: 16px;
  color: rgba(51, 51, 51, 1);
}
.detail_c > div {
  width: 952px;
  padding: 10px 0;
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  margin-left: 38px;
}
.detail_c > div > p:nth-child(1) {
  width: 106px;
  text-align: center;
  border-right: 1px solid #eee;
}
.detail_c > div > p:nth-child(2) {
  padding: 0 16px;
}
.d_a {
  width: 952px;
  height: 48px;
  background: rgba(246, 243, 243, 1);
  border: 1px solid rgba(238, 238, 238, 1);
  margin-left: 38px;
}
.d_a > p {
    text-align: center;
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
}
.d_b {
  margin:0 38px;
  border-right:1px solid #eee;
}
.d_b_goods{
    border-bottom:1px solid #eee;
    border-left:1px solid #eee;
    border-right:1px solid #eee;
    box-sizing: border-box;
}
.goods_img {
    width:390px;
  padding: 24px 0;
}
.goods_img > img {
  width: 72px;
  height: auto;
  margin-right: 15px;
  margin-left: 26px;
}
.goods_img > p {
  width: 228px;
  font-size: 14px;
  color: rgba(51, 51, 51, 1);
  line-height: 22px;
}
.goods_price,
.goods_num {
  width: 171px;
  box-sizing: border-box;
  font-size: 14px;
  text-align: center;
  color: rgba(51, 51, 51, 1);
}
.goods_price{
  width: 171px;
}
.goods_num{
    width: 177px;
}
.d_b_paymoney {
  width: 212px;
  font-size: 18px;
  text-align: center;
  font-weight: 500;
  color: rgba(216, 20, 23, 1);
}
</style>
